<!--
 * @Author: zhangweinan
 * @Date: 2022-12-13 15:38:44
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-01-07 16:44:43
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\roles\invitation\detail.vue
-->
<template>
  <div class="app-container">
    <el-tabs accordion v-model="activeName">
      <el-tab-pane name="1" label="通知信息">
        <el-row :gutter="15">
          <el-form
            ref="noticForm"
            :model="formData"
            :rules="rules"
            size="medium"
          >
            <el-col :span="16">
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="80px" label="主题">
                    {{ formData.subject }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="时间">
                    {{ parseTime(formData.startTime) }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="地点">
                    {{ formData.address }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="联系人">
                    {{ formData.contacts }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="联系方式">
                    {{ formData.contactsPhone }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="方式">
                    <el-checkbox-group
                      v-model="formData.field119"
                      size="medium"
                      disabled
                    >
                      <el-checkbox
                        v-for="(item, index) in field119Options"
                        :key="index"
                        :label="item.value"
                        :disabled="item.disabled"
                        >{{ item.label }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="140px"
                    label="有效时长（分钟）"
                    prop="field120"
                  >
                    {{ formData.expirationTime }}
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="24">
                  <el-form-item label="短信模板" label-width="80px">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="noticContent"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col> -->
              </el-row>
            </el-col>
          </el-form>
        </el-row>
        <!-- <div v-html="noticContent"></div> -->
      </el-tab-pane>
      <el-tab-pane name="2" label="邀约动态">
        <el-descriptions
          :column="4"
          border
          :labelStyle="{ width: '110px' }"
          :contentStyle="{ width: '100px' }"
        >
          <el-descriptions-item label="邀约状态">{{
            status == "0" ? "待开启" : status == "1" ? "进行中" : "已完成"
          }}</el-descriptions-item>
          <el-descriptions-item label="选择模式">
            {{ selectType == "1" ? "随机抽取" : "定向选择" }}
          </el-descriptions-item>
          <el-descriptions-item label="名单状态">{{
            rosterStatus == "1" ? "已确认" : "待确认"
          }}</el-descriptions-item>
          <el-descriptions-item label="屏蔽同单位其他专家">{{
            isUnitLimit ? "是" : "否"
          }}</el-descriptions-item>
          <el-descriptions-item label="屏蔽单位" :span="4">
            <el-tag size="small" v-for="(item, idx) in unitNames" :key="idx">{{
              item
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="屏蔽个人" :span="4"
            ><el-tag size="small" v-for="(item, idx) in names" :key="idx">{{
              item
            }}</el-tag></el-descriptions-item
          >
        </el-descriptions>
        <div class="operate_btn">
          <span @click="refreshOperate">刷新</span>
          <span @click="startExert" v-if="status == 0">开启邀约</span>
          <span
            v-else-if="status == 1"
            style="background: red; border: 1px solid red"
            >进行中...</span
          >
          <span v-else style="background: gray; border: 1px solid gray"
            >已完成</span
          >
        </div>
        <div v-for="(element, index) in dynamics" :key="index">
          <div class="second_top_class">
            <div>
              <span>{{ element.name }}</span>
              <span>侯邀专家：{{ element.totalCount }}名</span>
              <span>计划邀约：{{ element.inviteesNumbers }}名</span>
            </div>
          </div>
          <el-table
            :data="element.expertList"
            border
            style="width: 100%"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <el-table-column label="序号" align="center"
              ><template slot-scope="scope">
                {{ Number(scope.$index + 1) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="unitName" label="工作单位" align="center">
            </el-table-column>
            <el-table-column
              prop="areaExpertise"
              label="擅长领域"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="jobTitle" label="职称" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="status" label="反馈状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0" style="color: #aaaaaa"
                  >待确认</span
                >
                <span v-else-if="scope.row.status == 1" style="color: #70b603"
                  >同意</span
                >
                <span v-else-if="scope.row.status == -1" style="color: #d9001b"
                  >拒绝</span
                >
                <span v-else-if="scope.row.status == 4" style="color: #d9001b"
                  >超时</span
                >
                <span v-else-if="scope.row.status == 3" style="color: #d9001b"
                  >名额已满</span
                >
                <span v-else style="color: #ec808d"
                  >已取消<svg-icon
                    icon-class="check_warning"
                    style="margin-left: 5px; cursor: pointer"
                    @click="cancelOperate(scope.row)"
                /></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane name="3" label="邀约名单">
        <div class="operate_btn">
          <span @click="nameListRefreshOperate">刷新</span>
          <span
            v-if="rosterStatus == '0' && nameList[0].expertList.length > 0"
            @click="confirmNameList"
            >确认名单</span
          >
          <span v-else style="background: gray; border-color: gray"
            >确认名单</span
          >
        </div>
        <div style="text-align: end">
          距离开始时间剩余{{ surplusNum }}天
          <el-tooltip
            class="item"
            effect="dark"
            content="开始时间到期将自动完成确认"
            placement="bottom"
          >
            <el-button type="text"
              ><svg-icon
                icon-class="check_warning"
                style="margin-left: 5px; cursor: pointer"
            /></el-button>
          </el-tooltip>
        </div>
        <div v-for="(element, index) in nameList" :key="index">
          <div class="second_top_class">
            <div>
              <span>{{ element.name }}</span>
              <span>侯邀专家：{{ element.totalCount }}名</span>
              <span>计划邀约：{{ element.inviteesNumbers }}名</span>
            </div>
          </div>
          <el-table
            :data="element.expertList"
            border
            style="width: 100%"
            v-loading="nameListloading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <el-table-column label="序号" align="center"
              ><template slot-scope="scope">
                {{ Number(scope.$index + 1) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="unitName" label="工作单位" align="center">
            </el-table-column>
            <el-table-column
              prop="areaExpertise"
              label="擅长领域"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="jobTitle" label="职称" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                {{
                  scope.row.status == 0
                    ? "待确认"
                    : scope.row.status == 1
                    ? "同意"
                    : scope.row.status == -1
                    ? "拒绝"
                    : scope.row.status == 4
                    ? "超时"
                    : scope.row.status == 3
                    ? "名额已满"
                    : "已取消"
                }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="rosterStatus == '0'"
                  type="text"
                  size="mini"
                  @click="replaceOperate(scope.row)"
                  >替换</el-button
                >
                <el-button
                  v-else
                  type="text"
                  size="mini"
                  style="color: gray"
                  disabled
                  >替换</el-button
                ></template
              ></el-table-column
            >
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <startDialog ref="startDialog" :id="editId" />
    <!--替换编辑弹出框-->
    <el-dialog title="替换" :visible.sync="replaceDialog" width="30%">
      <el-form :model="form" :rules="rules">
        <el-form-item label="替换原因" label-width="100px" prop="cancelType">
          <el-radio v-model="form.cancelType" label="1">请假</el-radio>
          <el-radio v-model="form.cancelType" label="2">其他</el-radio>
        </el-form-item>
        <el-form-item label="详情原因" label-width="100px" prop="reason">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请说明详情"
            v-model="form.reason"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="替换方式" label-width="100px" prop="replaceType">
          <el-radio v-model="form.replaceType" label="1"
            >自动替换（随机）</el-radio
          >
          <!-- <el-radio v-model="form.replaceType" label="2"
            >手动替换（指定）</el-radio
          > -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replaceDialog = false">取 消</el-button>
        <el-button type="primary" @click="replaceOkOperate">确 定</el-button>
      </div>
    </el-dialog>
    <!--替换展示弹出框-->
    <el-dialog title="替换" :visible.sync="replaceDetailDialog" width="30%">
      <el-form>
        <el-form-item label="替换原因" label-width="100px">
          {{ String(replaceData.replaceType) == "1" ? "请假" : "其他" }}
        </el-form-item>
        <el-form-item label="详情原因" label-width="100px">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请说明详情"
            v-model="replaceData.reason"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="替换方式" label-width="100px">
          {{
            String(replaceData.cancelType) == "1"
              ? "自动替换（随机）"
              : "手动替换（指定）"
          }}
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="确认名单" :visible.sync="confirmDialog" width="30%">
      <p class="linxuan_p">
        <span
          >本次成功邀请专家{{ experiseNum }}位。确认后将不能执行替换操作。</span
        >
        <span>是否确认？</span>
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmOperate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import startDialog from "./startDialog/index.vue";
import {
  getDetail,
  getDynamic,
  getNameList,
  getConditionInvitation,
  replaceInvitation,
  confirmInvitation,
  getInvitationTimeInfo,
} from "@/api/enterprise/invitation";
export default {
  name: "invitationDetail",
  components: {
    startDialog,
  },
  data() {
    return {
      loading: false,
      nameListloading: false,
      surplusNum: 5, //剩余多少天
      experiseNum: 5,
      replaceDialog: false,
      replaceDetailDialog: false,
      confirmDialog: false,
      selectType: "", //选择模式
      rosterStatus: "", //名单状态
      status: "", //邀约状态
      editId: "",
      isUnitLimit: false, //屏蔽同单位专家
      names: [], //屏蔽个人
      unitNames: [], //屏蔽单位
      noticContent:
        "【浙江省经济和信息化厅专家库】尊敬的 [姓名] 专家，您好。我们诚挚的邀请您参加 [主题]。会议时间：[时间]；地点：[地点]。如参加请点击链接（https://xxx.zj.gov.cn/）确认，有效时长[10分钟]。如有疑问请联系[联系人]，联系方式 [联系方式]。",
      activeName: "2",
      formData: {
        subject: "",
        startTime: "",
        address: "",
        contacts: "",
        contactsPhone: "",
        field119: [1],
        expirationTime: "",
      },
      rules: {
        cancelType: [
          {
            required: true,
          },
        ],
        reason: [
          {
            required: true,
            message: "请输入替换理由",
            trigger: "blur",
          },
        ],
        replaceType: [
          {
            required: true,
          },
        ],
      },
      field119Options: [
        {
          label: "短信",
          value: 1,
        },
      ],
      form: {
        cancelType: "1",
        replaceType: "1",
        reason: "",
      },
      replaceData: {
        cancelType: "1",
        replaceType: "1",
        reason: "",
      },
      dynamics: [
        {
          expertList: [],
          inviteesNumbers: 0,
          name: "",
          totalCount: 0,
        },
      ],
      nameList: [
        {
          expertList: [],
          inviteesNumbers: 0,
          name: "",
          totalCount: 0,
        },
      ],
      replaceId: "",
    };
  },
  created() {
    //基于id获取详情
    this.editId = this.$route.query && this.$route.query.id;
    //获取是否邀约状态
    this.status = this.$route.query && this.$route.query.status;
    //获取选择模式
    this.selectType = this.$route.query && this.$route.query.ruleType;
    this.rosterStatus = this.$route.query && this.$route.query.rosterStatus;
    //前端分页
    this.getList();
    //获取屏蔽条件
    this.getConditionInvitation();
    //获取专家邀约实时信息
    this.getInvitationTimeInfo();
  },

  methods: {
    cancelOperate(row) {
      this.replaceData.cancelType = row.cancelOperate;
      this.replaceData.replaceType = row.replaceType;
      this.replaceData.reason = row.reason;
      this.replaceDetailDialog = true;
    },
    getInvitationTimeInfo() {
      getInvitationTimeInfo(this.editId).then((res) => {
        this.surplusNum = res.data.daysLeft;
        this.experiseNum = res.data.totalExperts;
      });
    },
    getConditionInvitation() {
      getConditionInvitation(this.editId).then((res) => {
        let { data } = res;
        if (data == null) return;
        this.isUnitLimit = data.isUnitLimit;
        this.names = data.names ? data.names.split(",") : [];
        this.unitNames = data.unitNames ? data.unitNames.split(",") : [];
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNo = val;
      this.getList();
    },
    async getList() {
      await this.getDetail();
      await this.getDynamic();
      await this.getNameList();
    },
    getDetail() {
      getDetail(this.editId).then((response) => {
        this.formData = response.data;
      });
    },
    getDynamic() {
      getDynamic(this.editId).then((response) => {
        this.loading = false;
        let { data } = response;
        this.dynamics = data;
      });
    },
    getNameList() {
      getNameList(this.editId).then((response) => {
        this.nameListloading = false;
        let { data } = response;
        this.nameList = data;
      });
    },
    //开启邀约
    startExert() {
      this.$refs.startDialog.show();
    },
    //邀约动态刷新
    refreshOperate() {
      this.loading = true;
      this.getDynamic();
    },
    //邀约名单刷新
    nameListRefreshOperate() {
      this.nameListloading = true;
      this.getNameList();
    },
    //确认名单
    confirmNameList() {
      this.confirmDialog = true;
    },
    //替换
    replaceOperate(row) {
      this.replaceDialog = true;
      this.replaceId = row.id;
    },
    replaceOkOperate() {
      let param = {
        id: this.replaceId,
        reason: this.form.cancelType,
        cancelType: this.form.cancelType,
        replaceType: this.form.replaceType,
      };
      replaceInvitation(param).then((res) => {
        this.replaceId = "";
        this.$message.success("替换成功");
        this.replaceDialog = false;
      });
    },
    //确认名单
    confirmOperate() {
      confirmInvitation(this.editId).then((res) => {
        this.rosterStatus = "1";
        this.confirmDialog = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.second_top_class {
  height: 30px;
  position: relative;
  div {
    &:nth-child(1) {
      position: absolute;
      bottom: 2px;
      span {
        font-size: 14px;
        text-align: left;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-style: normal;
        margin-right: 10px;
      }
    }
  }
}
.operate_btn {
  width: 100%;
  height: 35px;
  text-align: end;
  margin-top: 20px;
  box-sizing: border-box;
  span {
    display: inline-block;
    width: 82px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    border-radius: 3px;
    border: 1px solid #4877ee;

    &:nth-child(1) {
      margin-right: 12px;
      color: #4877ee;
    }
    &:nth-child(2) {
      background: #4877ee;
      color: #ffff;
    }
  }
}
.btn_calss {
  text-align: center;
  margin-top: 10px;
}
.linxuan_p {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
  span {
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
  }
  .ok_style {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .start_style {
    color: #409eff;
    cursor: pointer;
  }
}
::v-deep .el-dialog__body {
  padding-top: 0 !important;
}
::v-deep .el-dialog__title {
  font-weight: bold;
}
.hy_page {
  float: right;
  margin-top: 20px;
}
</style>
